<template>
    <div :style="{'--width': width, '--color': color, '--background': background, '--height': height}" @click="handleClick">
        <el-button v-if="!useSlot" :round="round" :circle="circle" :type="type" :loading="loading" :size="size" :icon="icon" :plain="plain" :disabled="disabled">
            {{text}}
        </el-button>
        <el-button v-else :type="type" :round="round" :circle="circle" :loading="loading" :size="size" :icon="icon" :plain="plain" :disabled="disabled">
            <slot></slot>
        </el-button>
        
    </div>
</template>

<script>
/**
 * 按钮封装
 * @param {Boolean} useSlot 是否使用插槽
 * @param {String} type 按钮格式primary / success / warning / danger / info / text
 * @param {String} text 按钮文本
 * @param {Boolean} disabled 是否禁止点击
 * @param {Boolean} loading 是否显示loadding效果
 * @param {String} icon 按钮前置图标
 * @param {String} size 尺寸 medium/small/mini
 * @created 2024-03-21
 * @author Xuyun
 */
export default {
    name: 'cxyButton',
    props: {
        useSlot: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: '' 
        },
        text: {
            type: String,
            default: '这是按钮' 
        },
        disabled: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        },
        icon: {
            type: String,
            default: '' 
        },
        size: {
            type: String,
            default: '' 
        },
        width: { //自定义按钮宽度
            type: String,
            default: '50'
        },
        height: { //自定义按钮宽度
            type: String,
        },
        background: { // 按钮背景颜色
            type: String,
        },
        color: {// 字体颜色
            type: String, 
        },
        plain: { // 朴素按钮
            type: Boolean,
            default: false
        },
        round: { // 是否圆角按钮
            type: Boolean,
            default: false 
        },
        circle: { // 是否圆形按钮
            type: Boolean,
            default: false
        }
    },
    data() {
        return {

        }
    },
    methods: {
        handleClick() {
            this.$emit('handleClick')
        }
    }
}
</script>

<style scoped>
.el-button {
    width: var(--width);
    height: var(--height);
    background: var(--background);
    color: var(--color);
}
.btn {
    width: 100%;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>